<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 因为之前的表单控件的值都是写死的,但通常表单的值都是从数据库获取的 -->
			<input type="checkbox" name="" v-model="hobby" id="favorite" value="篮球">篮球
			<input type="checkbox" name="" v-model="hobby" id="favorite" value="足球">足球
			<input type="checkbox" name="" v-model="hobby" id="favorite" value="羽毛球">羽毛球
			<input type="checkbox" name="" v-model="hobby" id="favorite" value="乒乓球">乒乓球
			<h3>{{hobby}}</h3>
			<!-- 采用值绑定 -->
			<label v-for="item in originHobbies" :for="item">
				<input type="checkbox" :value="item" v-model="hobby" :id="item">{{item}}
			</label>
			<h3>{{hobby}}</h3>
		</div>
	</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app = new Vue({
			el:'#app',
			data:{
				hobby : [],
				originHobbies:['篮球','足球','羽毛球','乒乓球']
			}
		})
	</script>
</html>
